/**
* 售票页面
*/
import React, { Component } from 'react'

import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  Alert,
  Button,
  Dimensions,
  TouchableWithoutFeedback,
  TouchableOpacity,
  StatusBar,
  Linking,
  TextInput,
  ScrollView
} from 'react-native'

import SafeView from 'react-native-safe-area-view'
import GetSetStorge from '../../common/GetSetStorge'
import ImageResources from '../../common/ImageResources'
import FetchResources from '../../common/FetchResources'
import RNToAndroid from '../../common/RNToAndroid'
import { RouteHelper } from 'react-navigation-easy-helper'
import NavPage from '../../common/NavPage'
import Screen from '../../common/screen'
import ButtonView from './ButtonView'
import axios from 'axios'
import qs from 'qs'
import Toast from 'antd-mobile/lib/toast'
import TicketVerifyOne from './TicketVerifyOne'
import InspectQueryOne from '../Inspect/InspectQueryOne'
import screen from '../../common/screen';

export default class Customer extends Component {
  static navigationOptions = ({ navigation }) => ({
    tabBarOnPress: (tab) => {
      navigation.state.params.navigatePress()
      tab.jumpToIndex(tab.scene.index)
    }
  })

  constructor(props) {
    super(props)
    this.state = {
      consumptionName:'',
      consumptionId:'',
      price:'',
      TicketVerify:true,
      permissionList:[],
      inspectDataList:[],
      ticketTitle:'',
      inspectList:false,
      inspect:false,
      sellTicket:true
      
    }
  }

  componentDidMount() {
    RouteHelper.navigate('TicketVerify')
    //已登录状态，再次进去时查询该账户关联的项目及价格
    GetSetStorge.getStorgeAsync('loginInfo').then((result) => {
      if (result) {
        axios.post(FetchResources.Fetch.GetPermission,//获取当天权限和项目价格
          qs.stringify({
            sellerId:result.split('|')[0],
            // sellerId:'yanpiao',
          })
        ).then((response) => {
          if(response.data.success){//查询成功
            let permissionList = response.data.permissionList
            if(permissionList.length == 1 &&permissionList[0]['salePermission'] == '1'){
              this.setState({
                consumptionName:permissionList[0]['consumptionName'],
                consumptionId:permissionList[0]['consumptionId'],
                price:permissionList[0]['price'],
                TicketVerify:false,
                sellTicket:true
              })
            }
            if(permissionList.length == 1 &&permissionList[0]['checkPermission'] == '1'&&permissionList[0]['salePermission'] == '0'){
              this.setState({
                consumptionName:permissionList[0]['consumptionName'],
                consumptionId:permissionList[0]['consumptionId'],
                inspectList:false,inspect:true,sellTicket:false,TicketVerify:false,ticketTitle:'验1票'})
            }
            
            if(permissionList.length > 1){
              let inspectList = []
              let sellTicketList = []
              this.setState({permissionList})
              for(let i=0 ; i<permissionList.length ; i++){
                if(permissionList[i]['checkPermission'] == '1'){ 
                  inspectList.push(permissionList[i])
                }
                if(permissionList[i]['salePermission'] == '1'){ 
                  sellTicketList.push(permissionList[i])
                }
              }
              this.setState({permissionList:sellTicketList,inspectDataList:inspectList})
              if(inspectList.length > 1){
                this.setState({inspectList:true,inspect:false,sellTicket:true,TicketVerify:true,ticketTitle:'验票'})
              }else if(inspectList.length == 1){
                
                this.setState({inspectList:true,inspect:true,sellTicket:false,TicketVerify:false,ticketTitle:'验票'})
              }
              if(sellTicketList.length>1&&inspectList.length >= 1){
                this.setState({inspectList:false,inspect:false,sellTicket:true,TicketVerify:true,ticketTitle:'售票',permissionList:this.state.permissionList})
              
              }
              if(sellTicketList.length == 1 &&sellTicketList[0]['checkPermission'] == '1'){
                
                this.setState({
                  consumptionName:this.state.permissionList[0]['consumptionName'],
                  consumptionId:this.state.permissionList[0]['consumptionId'],
                  price:this.state.permissionList[0]['price'],
                  inspectList:false,inspect:false,sellTicket:false,TicketVerify:false,ticketTitle:'验票'})
              }
              if(sellTicketList.length == 0&&inspectList.length > 1){
                this.setState({permissionList:this.state.inspectDataList})
              }

            }
          }
        }).catch((error) => {
        })
      }
    }).catch((error) => {
      console.log('==========================')
      console.log('系统异常' + error)
      console.log('==========================')
    })
    
    this.props.navigation.setParams({ navigatePress: this.clickTabCallback })
  }

  // tab 切换调用方法
  clickTabCallback = () => {
    // this.refs.header.reload()
  }

  onButtonPress(consumptionName,consumptionId,price) {
    let {inspectList} = this.state
    if(inspectList){
      RouteHelper.navigate('InspectQuery',{consumptionName,consumptionId})
    }else{
      RouteHelper.navigate('TicketVerify',{consumptionName,consumptionId,price})
    }
  }

  goBack() {
    RouteHelper.pop()
  }

  next() {

  }

  render() {
    const bgText = ['#4DC6ED','#F0576F','#D35FC4','#FFA898','#5D90EA']
    // const bgText = ['#00E1D8','#00F0B7','#00FE98','#F0576F','#D35FC4','#FFA898']
    // const bgText = ['#F0576F','#D35FC4','#FFA898']
    let { permissionList,consumptionId,consumptionName,price,TicketVerify,ticketTitle,sellTicket,inspectList,inspect} = this.state
    return (
      <SafeView forceInset={{ top: 'always', bottom: 'never' }} style={{ flex: 1 }}>
      {
        TicketVerify&&sellTicket?
        <View style={{ flex: 1 }}>
          <StatusBar
            animated={true}
            hidden={false}
            backgroundColor={'#5C7094'}
            translucent={true}
            barStyle={'light-content'}
            showHideTransition={'fade'}
            networkActivityIndicatorVisible={true}
          />
          <NavPage goBack={() => { RouteHelper.pop() }} showGoBack={''} title={''} refund={''} showInspect={inspectList} bgColor={'#F6F7F8'} />
          <View style={styles.container}>
            <View style={{ height: 30 }}>
              <Text style={{ fontSize: 20, fontWeight: '500', color: '#111', marginLeft: Screen.width * 0.075 }}>{ticketTitle}</Text>
            </View>

            <ScrollView
              showsVerticalScrollIndicator={false}    // 隐藏垂直指示器
              style={{ flex: 1, }}
            >
              <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'center', width: Screen.width, paddingTop: 10, }}>
                {
                  permissionList.map((item, index) => (
                    
                    <TouchableWithoutFeedback underlayColor="rgb(210, 230,255)" activeOpacity={0.5} onPress={this.onButtonPress.bind(this,item.consumptionName,item.consumptionId,item.price)}   >
                      <View style={[styles.item,{borderBottomLeftRadius:4,borderTopLeftRadius:4,}]}>
                        <View style={{height:screen.width*0.37,justifyContent: 'center',alignItems:'center',borderBottomLeftRadius:4,borderTopLeftRadius:4,flex:2,}}>
                          <Image style={{width:screen.width*0.9,height:screen.width*0.37}} source={ImageResources.CommonIcon[`Item${index}`]} />
                          <Text style={{ fontSize:12,textAlign: 'center',position:'absolute',top:25,right:20,color:'#fff'}}>{`心宿花海 · 龙隐于湾`}</Text>
                          <Text style={{ fontSize:27,fontWeight:'500', textAlign: 'center',position:'absolute',bottom:24,right:30,color:'#fff'}}>{item.consumptionName}</Text>
                        </View>
                      </View>
                    </TouchableWithoutFeedback>

                  ))
                }
              </View>
            </ScrollView>
          </View>
        </View> :
        <TicketVerifyOne consumptionName={consumptionName} consumptionId={consumptionId} price={price}  />
        }

        {
          inspect ?
          <InspectQueryOne consumptionName={consumptionName} consumptionId={consumptionId}   /> : null
        }

      </SafeView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F6F7F8',
  },
  header: {
    height: 500
  },
  item: {
    width: screen.width*0.9,
    height: screen.width*0.37,
    marginBottom: 10,
    borderRadius: 5,
    justifyContent: 'center',
    alignItems:'center',
    flexDirection:'row'
  },
  customerImage: {
    flex: 1.5,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  customerImageSize: {
    height: 102,
    width: 132,
    resizeMode: "contain"
  },
  bottomButton: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'flex-end',
    marginBottom: 25,
  },
  TouchableHighlightStyle: {
    borderRadius: 6,
    marginTop: 5,
    padding: 13,
    alignItems: 'center',
    width: Dimensions.get('window').width * 0.85,
    backgroundColor: "#105eae"
  },
  buttonText: {
    fontSize: 16,
    alignItems: 'center',
    textAlign: "center",
    color: "#fff"
  },
  itemNameLay: {
    alignSelf: 'flex-start',
    marginTop: 16,
    paddingHorizontal: Screen.width * 0.088,
  },
  itemName: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#000'
  },
  mainLay: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  inputLay: {
    width: Screen.width * 0.784,
    height: 42,
    marginTop: 16,
    paddingHorizontal: 16,
    borderRadius: 21,
    borderColor: '#CDD5DC',
    borderWidth: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: 'white'
  },
  inputTxt: {
    height: 24,
    padding: 0,
    fontSize: 16,
    flex: 1
  },
  inputCode: {
    width: 24,
    height: 24
  },
  //详情
  detail: {
    width: Screen.width * 0.866,
    height: 224,
    marginTop: 14,
    backgroundColor: 'white',
    borderRadius: 5,
    alignItems: 'center',
    //设置阴影
    shadowOffset: { width: 0, height: 0 },
    shadowColor: 'black',
    shadowOpacity: 1,
    shadowRadius: 5
  },
  theme: {
    marginVertical: 26,
  },
  themeName: {
    fontSize: 16,
    color: 'rgba(0,0,0,.72)',
  },
  itemLay: {
    width: Screen.width * 0.717,
    height: 30,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  itemFs: {
    fontSize: 14,
    color: 'rgba(0,0,0,.42)'
  },
  detailItem: {
    width: Screen.width * 0.866,
    height: 32,
    // backgroundColor:'pink',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginTop: 24,
    paddingLeft: Screen.width * 0.085,
    paddingRight: Screen.width * 0.0426,
    borderTopColor: '#CDD5DC',
    borderTopWidth: 1,

  },
  itemTxt: {
    fontSize: 14,
    color: 'rgba(0,0,0,.72)',
  }
});